<template>
  <div class="cacheManage">
    <basic-container>
      <div>
        <m-s-search
          @searchClick="(v) => queryFormData(v)"
          :list="cacheManageGroupOption.column"
        >
        </m-s-search>
      </div>
      <avue-crud
        :option="cacheManageGroupOption"
        :data="data"
        :table-loading="loading"
        :page.sync="page"
        @current-change="currentChange"
        @size-change="sizeChange"
        @selection-change="(v) => (selection = v)"
        ref="crud"
        @row-save="rowSave"
      >
        <template slot="menuLeft">
          <el-button size="small" @click="clearCache">清除缓存空间 </el-button>
        </template>

        <template slot="menu" slot-scope="{ row,index }">
          <el-button
            text
            type="text"
            v-if="row.$cellEdit"
            @click="rowCell(row, index)"
            >保存</el-button
          >
          <el-button v-else type="text" @click="showGroup(row.redisKey)">
            进入
          </el-button>
          <el-button
            v-if="row.$cellEdit"
            text
            type="text"
            @click="()=>rowCancel(row, index)"
            >取消</el-button
          >
          <el-button text v-else type="text" @click="rowCell(row, index)"
            >编辑</el-button
          >
        </template>
      </avue-crud>
      <ms-drawer
        @refresh="getList()"
        ref="md"
        :visible.sync="visible"
        :tab-list.sync="tabsList"
      ></ms-drawer>
    </basic-container>
  </div>
</template>
<script>
import commonJs from "@/util/commonJs";
import MSSearch from "@/DMDComponents/MSSearch.vue";
import * as api from "@/api/cacheManage/cacheManage";

export default {
  name: "cacheManageGroup",
  mixins: [commonJs],
  inject: ["cacheManageGroupOption"],
  components: { MSSearch },
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      loading: false,
      queryForm: {},
      data: [],
      selection: [],
    };
  },
  methods: {
    rowCancel(row, index) {
      console.log('row, index',row, index)
     this.$refs.crud.rowCancel(row,index);
     console.log('datadatadatadatadatadatadatadatadatadatadata',this.data)
    },
    rowCell(row, index) {
      this.$refs.crud.rowCell(row, index);
    },
    rowSave(form, done) {
           console.log('form, done',form, done)
      api
        .groupRemark({ redisRemark: form.remarks, redisGroup: form.redisKey })
        .then((res) => {
          this.$message.success("编辑成功！");
          done();
          this.getList();

        });
    },
    showGroup(key) {
      this.$router.push({ path: "/cacheManage/cacheManage", query: { key } });
    },
    clearCache() {
      if (this.selection.length === 0) {
        this.$message.error("请先选择！");
        return;
      }
      const listData = this.selection.map((row) => ({
        redisKey: row.redisKey,
      }));
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.delGroup(listData).then((res) => {
            this.$message.success("删除成功！");
            this.queryFormData();
          });
        })
        .catch(() => {});
    },
    queryFormData(v) {
      this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      };
      this.queryForm = v;
      this.getList();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getList();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList();
    },
    getList() {
      this.loading = true;
      api
        .getList({
          current: this.page.currentPage,
          size: this.page.pageSize,
          ...this.queryForm,
        })
        .then((res) => {
          const { list = [], totalRows } = res.data.data;
          this.page.total = totalRows;
          this.data = [...list];
          this.loading = false;
        });
    },
  },
};
</script>